<section class="studio-project-list-header">
    <div class="studio-project-list-header-section">
        <div *ngIf="isSmallScreen">
            <button mat-icon-button color="accent" aria-label="Open sidenav" (click)="openSidenav()">
                <i class="material-icons-outlined">space_dashboard</i>
            </button>
        </div>
        <div class="studio-title-actions" *ngIf="!searchBarExpanded">
            <div class="studio-project-list-header-title">
                {{ headerLabel$ | async | translate }}
            </div>
            <div class="studio-project-list-header-actions" *ngIf="!isSmallScreen; else iconButtons">
                <ng-container *ngFor="let action of actions">
                    <button mat-button onclick="this.blur()" (click)="runAction(action.handler)" class="studio-{{action.actionName}}-button">
                        <span>{{ action.title | translate }}</span>
                    </button>
                </ng-container>
            </div>
        </div>
        <div class="studio-header-vertical" *ngIf="!searchBarExpanded"></div>

        <div *ngIf="showSearchBar" [ngClass]="searchBarExpanded === true ? 'studio-header-search-bar-active' : 'studio-header-search-bar-inactive'">
            <modelingsdk-search-header (isSearchBarExpanded)="isSearchBarExpanded($event)" [url]="url"></modelingsdk-search-header>
        </div>
    </div>
</section>

<ng-template #iconButtons>
    <div class="studio-project-list-header-actions">
        <ng-container *ngFor="let action of actions">
            <button mat-mini-fab [matTooltip]="action.actionName" (click)="runAction(action.handler)" class="studio-{{action.actionName}}-button">
                <mat-icon>{{action.icon}}</mat-icon>
            </button>
        </ng-container>
    </div>
</ng-template>
